{% extends 'index.html' %}
{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    <style>
        .result_title {
            text-decoration: underline;
        }
    </style>
</head>

<body>

{% block title %}
    <span class="navbar-page-title"> 军事需求知识百科 - 百科搜索 </span>
{% endblock %}


{% block content %}
    <div class='container-fluid'>
        <form action="{% url 'knowledge_search' %}" method="post">
            <div style="margin: 0;width: 408px;">
                <input type="text" id="key_word_store" value="{{ key_word }}" style="display: none">
                <button class='my-btn' type="submit"
                        style="float: right;border-radius: 0 5px 5px 0;height: 44px;line-height: 44px">搜索
                </button>
                <input type="text" name="key_word" id="key_word" class="form-control my-input my-search-input"
                       placeholder="请输入要搜索的百科词条名称" value="{{ key_word }}"
                       style="width:350px;float: right;height: 44px;">
            </div>
        </form>
    </div>
    <div class='container-fluid'>
        {% for data_obj in new_data %}
            <div class="result_div" style="margin: 0 0 30px;cursor: pointer" toID = "{{ data_obj.id }}">
                <div style="background: #0a318a;font-size: 25px;padding: 10px;border-radius: 5px 5px 0 0;"><a
                        class="result_title" style="color: #ffffff"
                        href="{% url 'preview_require_wikipedia' data_obj.id %}">{{ data_obj.name }}</a>
                </div>
                <div class="result_content" style="border: 3px solid #0a318a;border-radius: 0 0 5px 5px;padding: 10px;text-indent: 2em;
                    font-size: 14px;">{{ data_obj.content }}</div>
            </div>
        {% endfor %}


    </div>
{% endblock %}

{% block myjs %}
    <script>
        $('#card_template_choiced').val('知识卡片模板');

        document.getElementById("jsxqzsbk").style.display = 'block';
        document.getElementById("bkss").style.backgroundColor = 'rgba(30,21,21,0.44)';

                /**
         * 修改搜索结果标题的颜色
         */
                function toHTML (id) {
                    // 生成路径
            var url = "{% url 'delete_card_template' 0  %}";
            url = url.replace(/0/, id);

                    window.location.href = url
                }

                        // 知识推理模型导入弹框
        $('.result_div').click(function () {
            {#$(this)#}
            var id = $(this).attr("toID");
            var url = "{% url 'preview_require_wikipedia' 0  %}";
            url = url.replace(/0/, id);
                                window.location.href = url

        });

        /**
         * 修改搜索结果标题的颜色
         */
        $('.result_title').each(function () {
            var str = $(this).text();
            //console.log(str)
            var searchValue = $('#key_word_store').val();
            //console.log(substr)
            var substr = `/${searchValue}/g`;
            var replaceStr = str.replace(eval(substr), `<span style='color:red'>${searchValue}</span>`)
            $(this).html(replaceStr);
        })

        /**
         * 修改搜索结果简介的颜色以及限制文字长度？
         */
        $('.result_content').each(function () {
            var str = $(this).text().toString();
            console.log(str)
            if (str.length > 200) {
                let replaceStr = str.substr(0, 200) + '...'
                console.log('大于200',replaceStr)
                $(this).html(replaceStr);
            }
        })

    </script>
{% endblock %}

</body>

</html>